<template>
  <div class="app_main">
    <div class="app_container">
      <!-- 条列 -->
      <div class="nav_top">
        <!-- 左边条列 -->
        <div class="address-layout_left">
          <div class="out-border">
            <div class="layout-titles">后台项目</div>
            <div class="address-content">mall</div>
          </div>
          <div class="out-border">
            <div class="layout-titles">前端项目</div>
            <div class="address-content">mall-admin-web</div>
          </div>
          <div class="out-border">
            <div class="layout-titles">学习教程</div>
            <div class="address-content">mall-learning</div>
          </div>
        </div>
        <div class="address-layout_lefts">
          <div class="total-frame">
            <div class="total_img">
              <img src="../../assets/one.png" alt="" style="width: 100%" />
            </div>
            <div class="total_title">
              <div style="height: 20px; margin-bottom: 10px; color: #909399; margin-top: 10px">今日订单总数</div>
              <div style="height: 20px; color: #606266">200</div>
            </div>
          </div>
          <div class="total-frame">
            <div class="total_img">
              <img src="../../assets/one.png" alt="" style="width: 100%" />
            </div>
            <div class="total_title">
              <div style="height: 20px; margin-bottom: 10px; color: #909399; margin-top: 10px">今日订单总数</div>
              <div style="height: 20px; color: #606266">200</div>
            </div>
          </div>
          <div class="total-frame">
            <div class="total_img">
              <img src="../../assets/one.png" alt="" style="width: 100%" />
            </div>
            <div class="total_title">
              <div style="height: 20px; margin-bottom: 10px; color: #909399; margin-top: 10px">今日订单总数</div>
              <div style="height: 20px; color: #606266">200</div>
            </div>
          </div>
        </div>
        <!-- 二维码 -->
        <div class="el-card__body">
          <div class="el_img_body">
            <img src="../../assets/erweima.jpg" class="el_img_body_img" />
          </div>
          <div style="text-align: center">mall全套学习教程连载中！</div>
          <div style="text-align: center; margin-top: 5px"><span style="color: #409eff">关注公号</span>，第一时间获取。</div>
        </div>
      </div>
      <!-- 待处理 -->
      <div class="un-handle-layout">
        <div class="layout_title">待处理事务</div>
        <div class="un-handle-content">
          <div class="el_row">
            <div class="el_row_item">
              <span class="font_mediem">待付款订单</span>
              <span class="color_danger">(10)</span>
            </div>
            <div class="el_row_item">
              <span class="font_mediem">待付款订单</span>
              <span class="color_danger">(10)</span>
            </div>
            <div class="el_row_item">
              <span class="font_mediem">待付款订单</span>
              <span class="color_danger">(10)</span>
            </div>
          </div>
          <div class="el_row">
            <div class="el_row_item">
              <span class="font_mediem">待付款订单</span>
              <span class="color_danger">(10)</span>
            </div>
            <div class="el_row_item">
              <span class="font_mediem">待付款订单</span>
              <span class="color_danger">(10)</span>
            </div>
            <div class="el_row_item">
              <span class="font_mediem">待付款订单</span>
              <span class="color_danger">(10)</span>
            </div>
          </div>
          <div class="el_row el_rows">
            <div class="el_row_item">
              <span class="font_mediem">待付款订单</span>
              <span class="color_danger">(10)</span>
            </div>
            <div class="el_row_item">
              <span class="font_mediem">待付款订单</span>
              <span class="color_danger">(10)</span>
            </div>
            <div class="el_row_item">
              <span class="font_mediem">待付款订单</span>
              <span class="color_danger">(10)</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品总揽 -->
      <div class="over_layout">
        <div style="margin-left: -10px; margin-right: -10px">
          <div class="el_col">
            <div class="out_border">
              <div class="layout_title">商品总览</div>
              <div class="layout_content">
                <div class="el_rows">
                  <div class="el_rows_content">100</div>
                  <div class="el_rows_content">400</div>
                  <div class="el_rows_content">50</div>
                  <div class="el_rows_content">500</div>
                </div>
                <div class="el_row_twos">
                  <div class="el_row_two">已下架</div>
                  <div class="el_row_two">已上架</div>
                  <div class="el_row_two">库存紧张</div>
                  <div class="el_row_two">全部商品</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-left: -10px; margin-right: -10px">
          <div class="el_col">
            <div class="out_border">
              <div class="layout_title">商品总览</div>
              <div class="layout_content">
                <div class="el_rows">
                  <div class="el_rows_content">100</div>
                  <div class="el_rows_content">200</div>
                  <div class="el_rows_content">1000</div>
                  <div class="el_rows_content">5000</div>
                </div>
                <div class="el_row_twos">
                  <div class="el_row_two">今日新增</div>
                  <div class="el_row_two">昨日新增</div>
                  <div class="el_row_two">本月新增</div>
                  <div class="el_row_two">会员总数</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 订单统计 -->
      <div class="echarts">
        <!-- title标题 -->
        <div class="echarts_top">订单统计</div>
        <!-- content -->
        <div class="echarts_content">
          <!-- left数据 -->
          <div class="echarts_left">
            <div class="left_cont">
              <div class="left_conts">
                <div class="left_title">
                  <div style="color: rgb(144, 147, 153); font-size: 14px">本月订单总数</div>
                  <div style="color: rgb(96, 98, 102); font-size: 24px; padding: 8px 0px">10000</div>
                  <div>
                    <span style="font-size: 14px; color: #67c23a">+10%</span>
                    <span style="color: rgb(192, 196, 204); font-size: 14px; margin-left: 5px">同比上月</span>
                  </div>
                </div>
                <div class="left_title" style="margin-top: 13px">
                  <div style="color: rgb(144, 147, 153); font-size: 14px">本周订单总数</div>
                  <div style="color: rgb(96, 98, 102); font-size: 24px; padding: 8px 0px">1000</div>
                  <div>
                    <span style="font-size: 14px; color: #f56c6c">-10%</span>
                    <span style="color: rgb(192, 196, 204); font-size: 14px; margin-left: 5px">同比上周</span>
                  </div>
                </div>
                <div class="left_title" style="margin-top: 13px">
                  <div style="color: rgb(144, 147, 153); font-size: 14px">本月销售总额</div>
                  <div style="color: rgb(96, 98, 102); font-size: 24px; padding: 8px 0px">10000</div>
                  <div>
                    <span style="font-size: 14px; color: #67c23a">+10%</span>
                    <span style="color: rgb(192, 196, 204); font-size: 14px; margin-left: 5px">同比上月</span>
                  </div>
                </div>
                <div class="left_title" style="margin-top: 13px">
                  <div style="color: rgb(144, 147, 153); font-size: 14px">本周销售总额</div>
                  <div style="color: rgb(96, 98, 102); font-size: 24px; padding: 8px 0px">50000</div>
                  <div>
                    <span style="font-size: 14px; color: #f56c6c">-10%</span>
                    <span style="color: rgb(192, 196, 204); font-size: 14px; margin-left: 5px">同比上周</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- right数据 -->
          <div class="echarts_right">
            <div class="right_top"></div>
            <div id="main" ref="chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Echarts',
  methods: {
    myEcharts() {
      console.log(this.$echarts)
      var myChart = this.$echarts.init(document.getElementById('main'))
      //配置图表
      var option = {
        title: {
          text: 'Stacked Area Chart',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top',
            },
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      }

      option && myChart.setOption(option)
      myChart.setOption(option)
    },
  },
  mounted() {
    this.myEcharts()
  },
}
</script>

<style lang="scss" scoped>
.app_main {
  // min-height: 100%;
  height: 1500px;
  // text-align: left;
  // background: white;
  .app_container {
    margin-top: 40px;
    margin-left: 120px;
    margin-right: 120px;
    // padding: 20px;
    // 头部导航样式
    .nav_top {
      width: 100%;
      height: 230px;
      position: relative;
      .address-layout_left {
        width: 78%;
        height: 111px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        .out-border {
          width: 320px;
          height: 111px;
          box-sizing: border-box;
          border: 1px solid #dcdfe6;
          .layout-titles {
            width: 100%;
            height: 50px;
            line-height: 20px;
            text-align: left;
            color: #606266;
            padding: 15px 20px;
            background: #f2f6fc;
            font-weight: 700;
            box-sizing: border-box;
          }
          .address-content {
            width: 100%;
            height: 60px;
            box-sizing: border-box;
            padding: 20px;
            font-size: 18px;
            line-height: 20px;
            color: #409eff;
          }
        }
      }
      .address-layout_lefts {
        width: 78%;
        height: 100px;
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        .total-frame {
          width: 320px;
          height: 100px;
          border: 1px solid #dcdfe6;
          padding: 20px;
          box-sizing: border-box;
          // position: relative;
          display: flex;
          .total_img {
            width: 60px;
            height: 60px;
          }
          .total_title {
            width: 200px;
            height: 60px;
            text-indent: 15px;
          }
        }
      }
      .el-card__body {
        width: 248px;
        height: 230px;
        position: absolute;
        right: 0;
        top: 0;
        box-sizing: border-box;
        padding: 20px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        .el_img_body {
          width: 208px;
          height: 154px;
          text-align: center;
          .el_img_body_img {
            width: 150px;
            height: 150px;
          }
        }
      }
    }
    //待处理样式
    .un-handle-layout {
      width: 100%;
      height: 208px;
      margin-top: 20px;
      border: 1px solid #dcdfe6;
      .layout_title {
        width: 100%;
        height: 48.36px;
        padding: 15px 20px;
        box-sizing: border-box;
        color: #606266;
        background: #f2f6fc;
      }
      .un-handle-content {
        padding: 20px 40px;
        box-sizing: border-box;
        .el_row {
          width: 100%;
          height: 40px;
          margin-bottom: 10px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          .el_row_item {
            width: 30%;
            height: 40px;
            border-bottom: 1px solid #ebeef5;
            line-height: 40px;
            .font_mediem {
              font-size: 16px;
              color: #606266;
            }
            .color_danger {
              color: #f56c6c;
              font-size: 16px;
              float: right;
            }
          }
        }
        .el_rows {
          margin-bottom: 0;
        }
      }
    }
    //商品总览
    .over_layout {
      width: 100%;
      height: 187px;
      // background: #409eff;
      margin-top: 20px;
      .el_col {
        width: 50%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        float: left;
        .out_border {
          width: 100%;
          height: 187px;
          border: 1px solid #dcdfe6;
          .layout_title {
            color: #606266;
            padding: 15px 20px;
            background: #f2f6fc;
            font-weight: 700;
          }
          .layout_content {
            width: 100%;
            height: 100%;
            padding: 40px;
            box-sizing: border-box;
            .el_rows {
              width: 100%;
              height: 27.59px;
              display: flex;
              .el_rows_content {
                width: 25%;
                height: 100%;
                font-size: 24px;
                text-align: center;
                color: #f56c6c;
              }
            }
            .el_row_twos {
              width: 100%;
              height: 27.59px;
              display: flex;
              margin-top: 10px;
              .el_row_two {
                font-size: 16px;
                color: #606266;
                width: 25%;
                height: 100%;
                text-align: center;
              }
            }
          }
        }
      }
    }
    //订单统计
    .echarts {
      width: 100%;
      height: 478.7px;
      margin-top: 20px;
      border: 1px solid #dcdfe6;
      .echarts_top {
        width: 100%;
        height: 48.39px;
        box-sizing: border-box;
        color: #606266;
        padding: 15px 20px;
        background: #f2f6fc;
        font-weight: 700;
      }
      .echarts_content {
        width: 100%;
        height: 428.31px;
        // float: left;
        position: relative;
        .echarts_left {
          width: 16.66%;
          height: 100%;
          border-right: 1px solid #dcdfe6;
          position: absolute;
          left: 0;
          //left样式
          .left_cont {
            width: 100%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            .left_conts {
              padding: 20px;
              box-sizing: border-box;
              .left_title {
                width: 100%;
                height: 84px;
              }
            }
          }
        }
        //right样式
        .echarts_right {
          width: 83.33%;
          height: 100%;
          position: absolute;
          right: 0;
          padding: 10px;
          box-sizing: border-box;
          .right_top {
            width: 100%;
            height: 32px;
            position: relative;
          }
          #main {
            width: 100%;
            height: 385px;
          }
        }
      }
    }
  }
}
</style>
